<html>
    <head>
        <link rel="stylesheet" href="iconfont.css">
        <link rel="stylesheet" href="editorIcons.css">
        <script src="vue.min.js"></script>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
        body {
            position: relative;
            -webkit-font-smoothing: subpixel-antialiased;
            margin: 0px;
            padding: 0px;
            background: #2c2c2c;
            /* linear-gradient(rgb(45, 45, 45), rgb(25, 25, 25)); */
            color: rgb(189, 189, 189);
            /* font-size: 12px; */
        }

        button {
            color: rgb(235, 233, 233);
            /* background-color: rgb(78, 77, 77); */
            border-radius: 0.3em;
            border-image: none;
            border-style: none;
            background-color: #2c2c2c;
            border: 0.5px solid rgb(87, 86, 86);
            cursor: pointer;
        }

        button:hover {
            color: white;
            font-weight: bold;
        }

        button:active {
            background-color: #070707;
            outline: none;
        }

        :root {
            --top-and-bottom: calc(100vh - 54px);
            --top: calc(100vh - 32px);
        }

        webview {
            /* border:solid 1px darkgray;
            border-left: unset;
            border-right: unset; */
        }

        #app {
            display: flex;
            flex-direction: row;
            height: 100vh;
            overflow-x: hidden;
        }

        .gamePanel {
            position: relative;
            display: flex;
            flex-direction: column;
            border-right: solid 0.5px rgb(87, 86, 86);
            height: 100%;
        }

        .nodePanel {
            display: flex;
            flex-direction: column;
            height: 100%;
            flex: 1;
            overflow: auto;
            /* min-width: calc(15em + 300px); */
            /* margin-left: -0.5px; */
        }

        .nodePanel hr {
            /* width: calc(100% - 0.5px) */
            margin-left: -0.5px;
        }

        .Component input[type="search"] {
            display: block;
            width: calc(100% - 8px);
            margin-top: 2px;
            margin-left: 4px;
            margin-right: 4px;
            /* color: black;
            background-color: whitesmoke; */
            color: whitesmoke;
            background-color: black;
            border: 1px;
            border-radius: 0.4em;
        }

        .gameBtns {
            display: flex;
            padding: 4px;
            background-color: #484848;
        }

        .gameBtnsRight {
            /* flex:1; */
            /* align-content: flex-end; */
            /* border:solid 1px red; */
        }

        .gameBtnsLeft {
            flex: 1;
            padding-top: 1px;
        }

        .consolePanel {
            flex: 1 1 0%;
            display: flex;
            position: relative;
            flex-direction: column;
            max-height: var(--top);
        }

        .nodePanel webview {
            flex: 1 1 0%;
        }

        .consolePanel input[type="search"] {
            color: whitesmoke;
            background-color: #2c2c2c;
            border: 1px solid gray;
            border-radius: 0.3em;
        }

        .codeTips {
            position: absolute;
            bottom: 20;
            left: 0;
            right: 0;
            background-color: rgb(46, 46, 46);
            padding: 0.3em;
            border-radius: 0.5em;
            box-shadow: 0 0 12px 1px black;
        }

        .helpPanel .helpTitle {
            font-weight: bold;
            color: lightblue;
        }

        .helpPanel a {
            word-wrap: break-word;
            word-break: break-all;
        }
        .helpPanel li {
            word-wrap: break-word;
            word-break: break-all;
        }

        .codeTips .helpCon {
            display: flex;
            justify-content: space-between;
        }

        .codeTips .help {
            color: darkkhaki;
        }

        .tipsCon {
            max-height: 20em;
            overflow-y: auto;
        }

        .tipsCon span {
            color: rgb(150, 150, 150);
        }

        .codeTips .selected {
            background-color: black;
        }

        .consolePanel a {
            white-space: nowrap;
        }

        .consolePanel .topMenu {
            padding-left: 5px;
            /* text-align: left; */
        }

        .consolePanel .topMenu > input {
            margin-right: 0.5em;
        }

        .consolePanel .topMenu label {
            margin-right: 0.5em;
            white-space: pre;
        }

        .logs {
            word-wrap: break-word;
            word-break: break-all;
            overflow-y: auto;
            font-size: 0.9em;
            background: #111111;
        }

        .gamePanel .logs {
            background: unset;
        }

        .logs .logTime {
            color: rgb(31, 154, 255);
        }

        .logItem:hover {
            background-color: black;
        }

        .logItem {
            /* content-visibility: auto; */
            padding-left: 4px;
            border-bottom: solid 0.5px rgba(196, 194, 194, 0.151);
            word-break: break-all;
            word-wrap: break-word;
        }

        .logItem .filter {
            /* font-weight: bold; */
            color: greenyellow;
            background-color: rgba(210, 105, 30, 0.658);
        }

        /* .logItem span{
            line-height: 1em;
        } */

        .tab {
            display: flex;
            padding: 4px;
            padding-bottom: 0px;
            align-items: stretch;
            border-bottom: solid 0.5px rgb(87, 86, 86);
            white-space: nowrap;
            background-color: #484848;
        }

        .tabs {
            flex: 1;
            display: flex;
            align-items: stretch;
        }

        .tabItem {
            display: inline-block;
            margin-right: 0.5em;
            padding-left: 0.5em;
            padding-right: 0.5em;
            padding-bottom: 4px;
            user-select: none;
            cursor: pointer;
            background-color: #353535;
            color: #d4d4d4;
            /* line-height: 100%;     */
            /* height:100%; */
        }

        .tabs .selected {
            background-color: #2c2c2c;
            border: 0.5px solid rgb(87, 86, 86);
            border-bottom: 0;
            margin-bottom: -1px;

            cursor: default;
            color: whitesmoke;
        }

        .nodeTree {
            overflow: auto;
            min-width: 242px;
            max-height: var(--top-and-bottom);
            border-right: solid 0.5px rgb(87, 86, 86);
            flex: 1;
            scroll-behavior: smooth;
            /* position: relative;        */
        }

        .nodearrow {
            transition: transform 0.2s;
        }

        .nodearrow:hover {
            /* background-color: #2c2c2c;
            border-radius: 50%; */
            /* color: #ffffff; */
            text-shadow: -0.5px -0.5px 0px #ffffff;
        }

        .node {
            font-size: 13px;
        }

        .searchPanel {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            background-color: black;
            padding: 0.1em;
            border-radius: 0.5em;
        }

        .searchBox {
            display: flex;
            padding-left: 2px;
            padding-right: 2px;
        }

        .searchBox {
            border: solid 0.5px rgb(98, 100, 100);
            border-radius: 0.5em;
        }

        .searchBox input[type="search"] {
            color: white;
            flex: 1;
            background: none;
            outline: none;
            border: none;
            font-size: 0.9em;
        }

        .searchBox input[type="search"]:focus {
            outline: none;
        }

        .searchTitle {
            padding: 0.3em;
            padding-bottom: 0;
            display: flex;
        }

        .searchTitle label {
            white-space: pre;
        }

        .searchList {
            padding: 0.3em;
            padding-bottom: 0;
            overflow-y: auto;
            flex: 1;
            max-height: 15em;
        }

        .searchList .itemPath {
            /* color: gray; */
            font-size: 0.9em;
        }

        .inspectPanel {
            overflow: auto;
            overflow-x: hidden;
            font-size: 13px;
            min-width: 300px;
            /* width:auto;        
            max-width: 360px; */
            height: auto;
            max-height: var(--top-and-bottom);
            /* resize:horizontal; */
            /* padding:2px; */
        }

        .inspectPanel input[type="number"] {
            width: 4.5em;
        }

        .Component .nodeName label {
            display: flex;
            line-height: 1em;
            align-items: center;
        }

        .nodeName {
            position: sticky;
            top: 0;
            background-color: #2c2c2c;
            border-bottom: solid 1px rgb(87, 86, 86);
        }

        .nodeName {
            display: flex;
            /* flex:1; */
            padding: 2px;
            padding-left: 4px;
            padding-right: 4px;
        }

        /* .nodeName label{
            flex:1;
        } */
        .comProperty,
        .nodeProperty {
            display: flex;
            align-items: center;
            color: whitesmoke;
            word-break: keep-all;
            white-space: nowrap;
            padding: 2px;
            margin-top: 3px;
            margin-bottom: 3px;
            padding-left: 4px;
            padding-right: 4px;
            width: auto;

            /* white-space:pre-wrap; */
        }

        .comProperty input[type="color"] {
            background-color: unset;
        }

        .comProperty select {
            background-color: unset;
            color: whitesmoke;
        }

        .comProperty option {
            background-color: black;
            color: whitesmoke;
        }

        .comProperty:hover {
            background-color: black;
        }

        .alignLeft {
            text-align: left;
        }
        .alignRight {
            text-align: right;
        }
        .nodePropertyTitle {
            display: inline-block;
            width: 5em;
            /* color: rgb(150, 150, 150); */
            color: rgb(189, 189, 189);
            /* text-align: right; */
            word-wrap: break-word;
            /* word-break:normal; */
            white-space: pre-wrap;
            line-height: 0.95em;
            margin-right: 1px;
            padding-left: 0.2em;
            padding-right: 0.2em;
        }

        .nodePropertyTitle::selection {
            background-color: #2553c9;
        }

        .comProperty .nodePropertyTitle {
            width: 8em;
        }

        .arrayItems .nodePropertyTitle {
            width: 1em;
        }

        /* .comProperty */
        a {
            color: rgb(14, 127, 233);
            cursor: pointer;
        }

        a:hover {
            color: rgb(52, 146, 235);
        }

        a:active {
            color: rgb(104, 170, 233);
        }

        .nodePropertySubTitle {
            display: inline-block;
            width: 1em;
            text-align: center;
            line-height: 0.95em;
        }
        .nodePropertySubTitle > span {
            vertical-align: middle;
        }

        .colorRect {
            width: 1em;
            height: 1em;
            display: inline-block;
            border-width: solid 1px black;
        }

        .comProperty .nodePropertySubTitle {
            /* overflow-x: hidden; */
            width: auto;
            min-width: 100px;
            max-width: 172px;
            word-wrap: break-word;
            text-align: start;
            /* word-break:normal; */
            /* white-space: wrap; */
            line-height: 0.95em;
        }
        .comProperty .nodePropertySubTitle :hover {
            background-color: rgba(0, 0, 0, 0.29);
        }

        .prewrap {
            white-space: pre-wrap;
        }

        .nodePropertySubTitle .icon-wrong2 {
            color: rgb(253, 94, 94);
        }

        .nodePropertySubTitle .icon-right {
            color: lightgreen;
        }

        .nodeTitle {
            /* content-visibility: auto; */
            /* pointer-events: none; */
            display: block;
            user-select: none;
            /* word-wrap:; */
            word-break: keep-all;
            white-space: nowrap;
        }

        .nodeTitle:hover {
            background-color: rgb(82, 80, 80);
        }

        .dcDesc {
            font-weight: bold;
            color: wheat;
        }

        hr {
            width: calc(100% - 0px);
            padding: 0;
            margin: 0;
            border: none;
            border-bottom: solid 1px rgb(87, 86, 86);
            /* background-color: red; */
            /* border-color: rgb(87, 86, 86);
            border-width: 0.5px; */
        }

        .settingDesc {
            color: gray;
            word-break: break-all;
        }

        .setting {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            height: 100%;
            max-height: calc(100%);
            width: min(calc(100vw - 32px), 20em);
            box-shadow: -1px 0 4px 0px black;
            background-color: #2c2c2c;
            padding: 1em;
            padding-top: 0;
            display: flex;
            /* z-index:200; */
            flex-direction: column;
            user-select: none;
            overflow-y: auto;
        }

        .setting textarea {
            width: 100%;
            resize: vertical;
            max-height: 5em;
        }

        .about {
            display: flex;
            /* z-index:200; */
            flex-direction: column;
            user-select: text;
        }

        .about .nodePropertyTitle {
            user-select: text;
            cursor: default;
            margin-bottom: 10px;
        }

        .setting .iconfont {
            cursor: pointer;
        }

        .settingHeader {
            display: flex;
            padding: 2px;
            padding-top: 1em;
            position: sticky;
            top: 0;
            background-color: #2c2c2c;
            border-bottom: 0.5px solid rgb(87, 86, 86);
        }

        .topSticky {
            position: sticky;
            top: -1em;
            background-color: #2c2c2c;
            border-bottom: 0.5px solid rgb(87, 86, 86);
        }

        .settingTitle {
            flex: 1;
            text-align: center;
            font-size: 2em;
            height: 1.4em;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .settingTitle img {
            height: 1em;
            width: 1em;
            margin-right: 10px;
        }

        .setting label {
            margin-top: 0.5em;
        }

        .searcItem {
            content-visibility: auto;
            height: 43px;
            /* contain: size; */
        }

        .slide-fade-enter-active {
            transition: all 0.3s ease;
        }

        .slide-fade-leave-active {
            transition: all 0.2s;
        }

        .slide-fade-enter,
        .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */
        {
            transform: translateX(20em);
            /* opacity: 0; */
        }

        .ResolutionResizer {
            position: fixed;
            top: 31px;
            left: 0px;
            resize: both;
            overflow: hidden;
            /* background-color: rgba(255, 217, 0, 0.555); */
            pointer-events: none;
            z-index: 1000;
            min-width: 280px;
            min-height: 200px;
        }

        .ResolutionSelector {
            position: absolute;
            top: 31px;
            right: 0px;
            background-color: rgb(66, 66, 66);
            padding: 0.3em;
            border-radius: 0.5em;
            box-shadow: 0 0 12px 1px black;
        }

        .ResolutionSelector hr {
            margin-bottom: 0.5em;
        }

        .ResolutionSelector input[type="number"] {
            /* width: 100%; */
            /* margin: 0.3em; */
        }

        .resoItem {
            cursor: pointer;
            border-radius: 0.5em;
            padding: 0.2em;
            display: flex;
            /* min-width: 200px; */
        }

        .flex1 {
            flex: 1;
        }

        .sizeName {
            display: flex;
            min-width: 200px;
            border-radius: 0.5em;
            padding-left: 0.5em;
            padding-right: 0.5em;
        }

        /* .sizeName .name{
            width:80px;
        } */
        .sizeName:hover {
            background-color: lightgrey;
            color: black;
        }

        .cocosPanel {
            padding: 1em;
            max-height: var(--top);
            overflow-y: auto;
        }

        .varsCon {
            margin-top: 0.5em;
            display: grid;
            grid-template-columns: 15em 15em;
        }

        .localStorageCon {
            margin-top: 0.5em;
            display: flex;
            flex-direction: column;
        }

        .varItem {
            /* width:10em; */
            word-break: break-all;
        }

        .localStorageCon .varItem:hover {
            background-color: #070707;
        }

        .varItemValue {
            color: lightgray;
        }

        .extensionPanel {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 1em;
        }

        .extensionPanel textarea {
            flex: 1;
            width: 100%;
            resize: none;
        }

        .extensionPanel hr {
            margin-top: 1em;
            margin-bottom: 1em;
        }

        .nanStr {
            background: black;
            padding-left: 10px;
            padding-right: 10px;
            z-index: 1000;
            color: white;
        }
    </style>
    <body>
        <div
            id="app"
            style="visibility: hidden"
            @contextmenu="showAppMenu"
            @click="showResolutionSelector=false"
        >
            <validate-panel></validate-panel>
            <div class="gamePanel" :style="setting.gamePanelStyle">
                <div class="gamebtns">
                    <div class="gameBtnsLeft">
                        <button
                            @click="refresh"
                            :title="useChinese?'刷新游戏':'Refresh Game'"
                        >
                            <span class="iconfont icon-shuaxin"></span>
                        </button>
                    </div>
                    <div class="gameBtnsRight">
                        <button
                            @click="playOrPause"
                            :title="useChinese?'恢复/暂停游戏':'Play|Pause Game'"
                        >
                            <span :class="[pauseIcon]"></span>
                        </button>
                        <button
                            @click="toggleFps"
                            :title="useChinese?'显示隐藏FPS信息':'Show|Hide FPS'"
                        >
                            <span class="iconfont icon-zoushi"></span>
                        </button>
                        <button
                            @click="toggleSnd"
                            :title="useChinese?'静音/恢复':'Mute|Resume Sound'"
                        >
                            <span
                                v-if="!setting.isMuted"
                                class="iconfont icon-sound-"
                            ></span>
                            <span
                                v-if="setting.isMuted"
                                class="iconfont icon-sound-1"
                            ></span>
                        </button>
                        <button
                            @contextmenu.stop="toggle3dHover"
                            @click="toggleHover"
                            :style="hoverBtnStyle"
                            :title="useChinese?'通过悬停方式定位节点, 左键2d，右键3d':'find by Hover, left click for 2d | right click for 3d'"
                        >
                            <span class="iconfont icon-aim1"></span>
                            <label
                                style="position: absolute; top: -0.3em; right: -0.6em; font-size: smaller"
                            >{{hoverMark}}</label>
                        </button>
                        <button
                            @click="toggleDesignMode"
                            :style="designBtnStyle"
                            :title="useChinese?'开关设计模式：可拖拽场景中的节点':'toggle design mode'"
                        >
                            <span class="iconfont icon-drag"></span>
                        </button>
                        <button
                            @click.stop="showResolutionSelector=!showResolutionSelector"
                            :title="useChinese?'调整分辨率':'Adjust Resolution'"
                            :style="resolutionBtnStyle"
                        >
                            <span class="iconfont icon-xuanzhuan"></span>
                        </button>
                        <button
                            v-if="!showDevToolInTab"
                            @click="openWvDevTool"
                            :title="useChinese?'打开开发者工具':'Open DevTool of Game Page'"
                        >
                            <span class="iconfont icon-tools-hardware"></span>
                        </button>
                    </div>
                </div>
                <resolution-resizer></resolution-resizer>
                <resolution-selector
                    v-if="showResolutionSelector"
                ></resolution-selector>
                <hr>
                <!-- http://gameview.creator-star.cn/cocos/cake/index.html -->
                <!-- http://localhost:7456 -->
                <webview
                    ref="wv"
                    preload="./preload.js"
                    :src="gameUrl"
                    :style="setting.webviewStyle"
                    :disablewebsecurity="disableWebSec"
                    nodeintegrationinsubframes="true"
                    plugins
                    webpreferences="contextIsolation=no"
                ></webview>
                <hr>
                <div class="logs" ref="logs">
                    <div
                        class="logItem"
                        v-for="l in smallLogs"
                        :style="{color:logColor(l.t)}"
                    >
                        <span class="logTime">{{l.time}}:</span>{{l.d}}
                    </div>
                </div>
            </div>
            <div class="nodePanel" v-show="!setting.simpleMode">
                <div class="tab">
                    <div class="tabs">
                        <div
                            :class="{tabItem:true,selected:tab==0}"
                            @click="tab=0"
                            @contextmenu.stop="showMenu"
                        >
                            <scene-tab v-if="inited"></scene-tab>
                            <a
                                v-show="showRefreshTreeBtn"
                                @click="forceUpdateTree"
                                class="iconfont icon-shuaxin"
                            ></a>
                        </div>
                        <div
                            :class="{tabItem:true,selected:tab==1}"
                            @click="tab=1"
                        >
                            <span class="iconfont icon-terminal-box-line"></span
                            >{{showDevToolInTab?(useChinese?"开发者工具":"DevTool"):"Console"}}
                        </div>
                        <div
                            :class="{tabItem:true,selected:tab==2}"
                            @click="tab=2"
                        >
                            <span
                                class="iconfont icon-jiarehuoyan-xianxing"
                            ></span>{{useChinese?"Cocos信息":"Cocos"}}
                        </div>
                        <div
                            :class="{tabItem:true,selected:tab==3}"
                            @click="tab=3"
                        >
                            <span class="iconfont icon-jiedian"></span
                            >{{useChinese?"扩展":"Extension"}}
                        </div>
                    </div>

                    <div>
                        <button
                            @click="showHelp"
                            :title="useChinese?'帮助':'Help'"
                        >
                            <span class="iconfont icon-help"></span>
                        </button>
                        <!-- <button @click="location.reload()" title="Refresh Plugin">
                        <span class="iconfont icon-shuaxin"></span>
                    </button> -->
                        <button
                            @click="showSetting"
                            :title="useChinese?'设置':'Setting'"
                        >
                            <span class="iconfont icon-shezhi"></span>
                        </button>
                    </div>
                </div>
                <!-- <hr> -->
                <!-- "n","deep","selected","close" -->
                <div
                    style="display: flex; flex: 1; position: relative"
                    v-show="tab==0"
                >
                    <div ref="nodeTree" v-if="nodeTree" class="nodeTree">
                        <div style="min-width: max-content">
                            <node-view
                                v-for="sn in nodeTree.children"
                                :n="sn"
                                :deep="1"
                                :selected="selectedNode==sn.id"
                                :key="sn.id"
                            ></node-view>
                        </div>
                    </div>
                    <div
                        v-show="!nodeTree"
                        style="display: flex; flex-direction: column; font-size: 50px; text-align: center; margin-left: auto; margin-right: auto; padding-top: 100px; text-shadow: 3px 3px 4px #0000004a"
                    >
                        <div
                            style="color: rgb(0 0 0 / 0%); background: linear-gradient(60deg, #36d1ff, #fafdff, #23b2ff, #ffff72); background-clip: text; -webkit-background-clip: text"
                        >
                            COCOS
                        </div>
                        <div
                            style="color: rgb(0 0 0 / 0%); background: linear-gradient(60deg, #b3b3b38c, #fafdff, #656565, #b7b7b0); background-clip: text; -webkit-background-clip: text"
                        >
                            INSPECTOR
                        </div>

                        <div
                            style="font-size: 20px; margin-top: auto; color: rgb(31, 154, 255)"
                        >
                            {{useChinese?"加载中...":"loading ..."}}
                        </div>
                        <spacer></spacer>
                        <ad></ad>
                        <!-- <div style="font-size: 12px;margin-top: auto;color: rgba(28, 150, 249, 0.579);">ad: 船神浏览器</div> -->
                        <!-- <div style="font-size: 0.5em;">loading...</div> -->
                    </div>
                    <div class="inspectPanel" v-if="nodeDetail">
                        <node-detail-view
                            :detail="nodeDetail"
                        ></node-detail-view>
                        <node-component
                            v-for="com in nodeDetail.coms"
                            :com="com"
                            :key="com"
                        ></node-component>
                    </div>
                    <search-panel v-show="nodeTree"></search-panel>
                </div>
                <webview
                    v-show="tab==1 && showDevToolInTab"
                    nodeintegrationinsubframes="true"
                    webpreferences="contextIsolation=no"
                    ref="devtools"
                    src="about:blank"
                ></webview>
                <console-panel
                    v-if="!showDevToolInTab && tab==1"
                ></console-panel>
                <cocos-panel v-if="tab==2"></cocos-panel>
                <extension-panel v-if="tab==3"></extension-panel>
            </div>
            <my-help ref="help"></my-help>
        </div>

        <div class="settingBox" id="setting">
            <transition name="slide-fade">
                <div class="setting" style="display: none" v-show="show">
                    <div class="settingHeader">
                        <span
                            class="iconfont icon-shanchu"
                            @click="close"
                            style="font-size: 1.5em"
                        ></span>

                        <div class="settingTitle">
                            <img src="icon.png" /> {{useChinese ?
                            "设置":"Setting"}}
                        </div>
                    </div>

                    <!-- <hr> -->
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="useChinese"
                        />
                        {{useChinese ? "使用中文":"Use Chinese"}}
                        <span class="settingDesc">
                            {{useChinese ? "右键菜单的语言更改将在重新打开插件窗口后生效" : "language changes of context menu, will available after reopen cocos inspector window"}}
                        </span>
                    </label>
                    <label>
                        {{useChinese ? "游戏视图下方日志数量：" : "Log Count Under GameView:"}}
                        <input
                            type="number"
                            @change="saveToStorage"
                            v-model="logCount"
                            min="0"
                            max="100"
                            step="1"
                        />
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="propertyAlignLeft"
                            step="1"
                            min="0"
                            max="100"
                        />
                        {{useChinese ? "属性名左对齐":"Left Align Property Names"}}
                    </label>
                    <label>
                        {{useChinese ? "打开数组，当长度小于或等于：":"Open Array if length <=:"}}
                        <input
                            type="number"
                            @change="saveToStorage"
                            v-model.number="openArrayLimit"
                            step="1"
                            min="0"
                            max="100"
                        />
                    </label>
                    <label>
                        {{useChinese ? "Prefab节点的文字尺寸：":"Prefab Node Font Size: "}}
                        <br>
                        <div style="display: flex">
                            <input
                                @change="saveToStorage"
                                min="1"
                                max="1.5"
                                step="0.01"
                                type="range"
                                v-model.number="prefabFontSize"
                            />{{prefabFontSize}}
                        </div>
                    </label>
                    <hr>
                    <br>
                    <label>
                        {{useChinese ? "Url参数：":"Url Parameters:"}}
                        <!-- {{logCount}} -->
                        <br>
                        <textarea
                            placeholder="example:?xxx=y&abc=d"
                            @paste="onPasteParams"
                            @change="saveToStorage"
                            v-model="urlParams"
                        ></textarea>
                    </label>
                    <label>
                        {{useChinese ? "自定义Url：":"Custom Url:"}}
                        <span class="settingDesc"
                        >{{useChinese ? "可通过菜单[open Custom Page]打开：":"can open by menu:[open Custom Page]"}}</span>
                        <br>
                        <textarea
                            placeholder="example:http://xxx.com"
                            @change="saveToStorage"
                            v-model="customUrl"
                        ></textarea>
                    </label>
                    <label>
                        UserAgent:
                        <span class="settingDesc"
                        >{{useChinese ? "置空会使用默认的userAgent":"will use default userAgent if empty"}}</span>
                        <br>
                        <textarea
                            @change="saveToStorage"
                            v-model="userAgent"
                        ></textarea>
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="retinaEnable"
                        />
                        {{useChinese ? "开启视网膜显示模式":"Retina Enable"}}
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="autoUpdateTree"
                        />
                        {{useChinese ? "自动刷新节点树":"Auto Update Node Tree"}}
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="syncNodeDetail"
                        />
                        {{useChinese ? "自动同步选中节点属性的变化":"Sync Node Detail"}}
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="openHttpProxy"
                        />
                        {{useChinese ? "开启http代理":"Open Http Proxy"}}
                    </label>
                    <hr>
                    <label>
                        {{useChinese ? "代理服务器":"Http Proxy Server"}}<br>
                        <span class="settingDesc"
                        >{{useChinese ?
                            "范例:":"example:"}}http=ip:port;https=ip:port</span
                        >
                        <textarea
                            @contextmenu="showInputMenu()"
                            @blur="saveToStorage"
                            v-model="httpProxyServer"
                            :disabled="!openHttpProxy"
                        ></textarea>
                    </label>
                    <label>
                        {{useChinese ? "排除规则":"Bypass Rules"}}<br>
                        <span class="settingDesc"
                        >{{useChinese ?
                            "范例:":"example:"}}foobar.com,*foobar.com,*.foobar.com,*foobar.com:99,https://x.\*.y.com:99</span
                        >
                        <textarea
                            @contextmenu="showInputMenu()"
                            @blur="saveToStorage"
                            v-model="proxyBypassRules"
                            :disabled="!openHttpProxy"
                        ></textarea>
                    </label>
                    <hr>
                    <br>
                    <b>
                        {{useChinese ?
                        "以下设置改变后需要重启插件或CocosCreator" : "Need Restart Inspector/CocosCreator After Change"}}
                    </b>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="disableWebSec"
                        />
                        {{useChinese ? "禁用web安全":"Disable Web Security"}}
                        <span class="settingDesc"
                        >{{useChinese ? "禁用后，游戏页面可跨域":"if disable, the page can cross domain"}}</span>
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="showDevToolInTab"
                        />
                        {{useChinese ? "在标签栏中显示开发者工具":"Show DevTool In Tab"}}
                    </label>
                    <hr>
                    <br>
                    <b>{{useChinese ? "FGUI设置":"FGUI Setting"}}</b>
                    <label>
                        <input
                            type="checkbox"
                            @change="saveToStorage"
                            v-model="displayAsFairyTree"
                        />
                        {{useChinese ?
                        "以FariyGUI的设计图纸模式显示节点树":"Display As Fairy Tree"}}
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            :disabled="!displayAsFairyTree"
                            @change="saveToStorage"
                            v-model="hideFairyComContainer"
                        />
                        {{useChinese ? "隐藏Fgui组件的Container节点层级": "Hide Fairy Component Container"}}
                    </label>

                    <hr>
                    <br>
                    <div>
                        {{useChinese ? "反馈建议：": "Feedback: "}}<a
                            @click="remote.shell.openExternal('https://forum.cocos.org/t/topic/116855')"
                            target="_blank"
                        >https://forum.cocos.org/t/topic/116855</a>
                    </div>
                    <br>
                    <div>
                        {{useChinese ? "查看新版本：": "Check New Version: "}}<a
                            @click="remote.shell.openExternal('https://store.cocos.com/app/detail/2940')"
                            target="_blank"
                        >https://store.cocos.com/app/detail/2940</a>
                    </div>
                    <hr>
                    <br>
                    <!-- <br> -->
                    <!-- <br> -->
                    <div class="about">
                        <div class="settingHeader">
                            <div class="settingTitle">
                                {{useChinese ? "关于": "About"}}
                            </div>
                        </div>
                        <!-- <hr> -->
                        <div>
                            <span class="nodePropertyTitle"
                            >{{useChinese ? "作者：": "Author:"}}</span>
                            chuan.z
                        </div>
                        <div>
                            <span class="nodePropertyTitle"
                            >{{useChinese ? "联系方式：": "Contact:" }}</span>
                            <a
                                @click="remote.shell.openExternal('mailto:bytetalking@qq.com')"
                            >bytetalking@qq.com</a>
                        </div>
                        <div>
                            <span class="nodePropertyTitle">{{useChinese ?
                                "网站：": "WebSite:"}}
                            </span>
                            <a
                                @click="remote.shell.openExternal('https://bytetalking.com')"
                            >https://bytetalking.com</a>
                        </div>
                        <hr>
                        <div>
                            <span class="nodePropertyTitle"
                            >{{useChinese ? "订阅号：": "WeChat Offical Account:"}}</span>
                            ByteTalking
                        </div>
                        <div>
                            <span class="nodePropertyTitle"
                            >{{useChinese ? "二维码：": "QRCode: "}}</span>
                            <img
                                src="wechatOC.jpeg"
                                style="max-width: 150px; max-height: 150px"
                            >
                        </div>
                    </div>
                </div>
            </transition>
        </div>

        <script src="./app.js">
        </script>
    </body>
</html>
